<template>
  <!-- <div> -->
    <div id="container" class="container"></div>
  <!-- </div> -->
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
  // 安全密钥
  // securityJsCode: '98404c23880b42f03d5faaa96a51a4f4'
  securityJsCode: '495b13f555dfc1483f5ab78c453e6315'
}
let AMap
export default {
  name: 'CallPoliceGaodeMap',
  props:['address','location'],
  data() {
    return {
            // 地图实例
            map: null,
      AMap: null,
      // 标记点
      marker: '',
      // 地址逆解析
      geoCoder: null,
      // 搜索提示
      AutoComplete: null,
      // 搜索关键字
      keywords: '',
      // 位置信息
      form: {
        lng: '',
        lat: '',
        address: '',
        adcode: '' // 地区编码
      },
      // 搜索节流阀
      loading: false,
      // 搜索提示信息
      options: []
    };
  },

  mounted() {
    this.initMap()
  },

  methods: {
    initMap () {
      AMapLoader.load({
        // 你申请的Key
        // key: '36726b83d3822ae3f31648d75d5f64a2',
        key: '501062f563d27a055ca9c3debff4e31e',
        version: '2.0',
        // 需要用到的插件
        plugins: ['AMap.Geocoder', 'AMap.AutoComplete']
      })

        .then((_amap) => {
          AMap = _amap
          // console.log(AMap)
          this.map = new AMap.Map('container', {
            viewMode: '3D', // 是否为3D地图模式
            zoom: 6, // 初始化地图级别
            defaultCursor: 'grab',
            center: [120.18575, 30.292038] // 初始化地图中心点位置
          })
          // // 搜索提示插件
          this.AutoComplete = new AMap.AutoComplete({ city: '全国' })
          // 点击获取经纬度;
          this.map.on('click', (e) => {
            // 获取经纬度
            // this.form.lng = e.lnglat.lng
            // this.form.lat = e.lnglat.lat
            this.$emit('setlocation',e)
            // 清除点
            this.removeMarker()
            // 标记点
            this.setMapMarker()
          })
        })

        .catch(() => {
        })
    },

    // 标记点

    setMapMarker () {
      // 自动适应显示想显示的范围区域
      this.map?.setFitView()
      this.marker = new AMap.Marker({
        map: this.map,
        position: [this.location.lng, this.location.lat]
      })
      
      // 逆解析地址

      // this.toGeoCoder()
      //  this.removeMarker ()
      this.map?.setFitView()

      this.map.add(this.marker)
    },

    // 清除点

    removeMarker () {
      if (this.marker) {
        this.map.remove(this.marker)
      }
    },
    // 搜索

    remoteMethod (query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.AutoComplete?.search(query, (status, result) => {
            const options = result.tips?.filter((i) => i.location)
            this.$emit('getoptions', options)
          })
        }, 200)
      } else {
        // this.$emit('getoptions', [])
        this.options=[]
      }
    },

    // 选中提示

    currentSelect (val) {
      // 清空时不执行后面代码
      if (!val) {
        return
      }
      // console.log(val)
      this.form = {
        lng: val.location?.lng,
        lat: val.location?.lat,
        address: val.district + val.address
        // adcode: val.adcode
      }
      // 清除点
      this.removeMarker()
      // 标记点
      this.setMapMarker()
    },
  },
  watch: {
    address(val) {
      this.remoteMethod(val)
    }
  }
};
</script>

<style lang="scss" scoped>
.container{
  height: 100%;
}

</style>